<template>
    <div>


        <el-container>

            <!--            侧边栏-->
            <el-aside :width="asideWith" style="min-height: 100vh;background: #001529;">

                <div style="height: 60px; line-height: 60px; display: flex;align-content: center;justify-content: center">
                    <img v-show="!isCollapse" src="../assets/logo_long.png" alt="LOGO"
                         style="margin: 10px 10px;border-radius: 10px">
                    <img v-show="isCollapse" src="../assets/logo_short.png" alt="LOGO"
                         style="margin: 10px 10px;border-radius: 100px">
                    <!--                 v-show="ture / false"  设置这个元素是否展示 -->
                </div>

                <el-menu :collapse="isCollapse" :collapse-transition="false" router style="border: none;"
                         background-color="#001529" text-color="rgba(255, 255, 255, 0.65)"
                         active-text-color="#fff"
                         :default-active="$route.path">
                    <el-menu-item index="/store/data">
                        <template>
                            <i class="el-icon-s-data"></i>
                            <span>数据展示</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="/store/purse">
                        <template>
                            <i class="el-icon-money"></i>
                            <span>我的钱包</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="/store/product">
                        <template>
                            <i class="el-icon-goods"></i>
                            <span>商品信息</span>
                        </template>
                    </el-menu-item>

                    <!--
                                        <el-submenu index="product">

                                            <template slot="title">
                                                <i class="el-icon-s-goods"></i>
                                                <span>商品管理</span>
                                            </template>

                                            <el-menu-item index="/store/product">
                                                <template>
                                                    <i class="el-icon-goods"></i>
                                                    <span>商品信息</span>
                                                </template>
                                            </el-menu-item>

                                        </el-submenu>
                    -->
                    <el-menu-item index="/store/orders">
                        <template>
                            <i class="el-icon-tickets"></i>
                            <span>订单信息</span>
                        </template>
                    </el-menu-item>

                    <!--                    <el-submenu index="orders">

                                            <template slot="title">
                                                <i class="el-icon-s-order"></i>
                                                <span>订单管理</span>
                                            </template>

                                            <el-menu-item index="/store/orders">
                                                <template>
                                                    <i class="el-icon-tickets"></i>
                                                    <span>订单信息</span>
                                                </template>
                                            </el-menu-item>

                                        </el-submenu>-->
                </el-menu>


            </el-aside>


            <el-container>

                <!--    顶部-->
                <el-header>

                    <!--     收缩图标    -->
                    <i :class="collapseIcon" style="font-size: 26px; margin:15px 0" @click="handleCollapse"></i>

                    <!--      面包屑       -->
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:20px 20px">

                        <el-breadcrumb-item
                                v-for="(item,index) in breadList"
                                :key="index"
                                :to="{ path: item.path }"
                        >{{ item.meta.title }}
                        </el-breadcrumb-item>

                    </el-breadcrumb>


                    <div style="flex:1; width : 0; display: flex; align-items: center; justify-content: flex-end">
                        <!--    全屏按钮      -->
                        <i class="el-icon-quanping" style="font-size: 26px;margin-right: 10px" @click="handleFull"></i>


                        <!--      头像 + 身份信息  +  自动下拉选项    -->
                        <el-dropdown>
                            <div style="display: flex;align-items: center;justify-content: center; cursor: default">
                                <img style="border-radius: 50px;margin-right: 10px" :src="account.avatar" alt=""
                                     width="40px" height="40px">
                                <span style="margin-left: 5px">{{ account.name }}</span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="showPersonalCenter">个人中心</el-dropdown-item>
                                <el-dropdown-item @click.native="showChangePassword">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>


                </el-header>

                <!--        主体区域-->
                <el-main>
                    <!--     通过 router-view 标签实现动态显示主题内容   -->
                    <router-view/>

                </el-main>

            </el-container>

        </el-container>
    </div>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "Store",
    data() {
        return {
            isCollapse: false,  // 菜单栏   默认不收缩
            asideWith: '210px', // 侧边栏宽度
            collapseIcon: 'el-icon-s-fold',    // 收缩图标
            dialogFormVisible_edit: false,    // 弹出框
            avatarUrl: '',       // 暂存后台传回来的图片链接
            form_user: {},      // 存储编辑用户信息的对象
            users: [],           // 存储后台获取到的用户信息
            account: {},         // 存储当前登录的用户数据
            breadList: [],      // 路由集合

        }
    },

    mounted() {
        this.account = JSON.parse(localStorage.getItem('account'))
    },

    watch: {
        $route() {
            this.getBreadcrumb();
        }
    },

    methods: {

        getBreadcrumb() {
            let matched = this.$route.matched;
            this.breadList = matched;
        },


        // 处理  展示个人中心  的点击事件
        showChangePassword() {
            // 跳转到  修改密码页面
            this.$router.push('/store/changePassword')
        },


        // 处理  展示个人中心  的点击事件
        showPersonalCenter() {
            // 跳转到  个人中心页面
            this.$router.push('/store/personalCenter')
        },


        // 收缩/展开  侧边栏
        handleCollapse() {
            this.isCollapse = !this.isCollapse;
            this.asideWith = this.isCollapse ? '64px' : '210px'
            this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
        },


        // 全屏
        handleFull() {
            document.documentElement.requestFullscreen()
        },


        // 退出登录
        logout() {
            // 清除用户数据
            localStorage.removeItem("account");
            // 清楚浏览器记录
            // localStorage.clear();

            // 提示用户退出登录
            this.$message.success("退出登录成功！")

            // 跳转到登录页面
            this.$router.push("/login")
        }
    },

    created() {
        this.getBreadcrumb();
    }
})
</script>


<style>

.el-menu--inline .el-menu-item {

    background-color: #000c17 !important;

}


.el-menu-item:hover, .el-submenu__title:hover {
    color: #fff !important;;
}


.el-menu-item.is-active {
    background-color: #1890ff !important;
    border-radius: 8px;
    margin: 4px;
}


.el-menu-item, .el-submenu__title {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
}


.el-aside {
    transition: width .3s;
    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.el-header {
    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    display: flex;
}


.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.el-form-item .el-input {
    margin-left: 20px;
    width: 80%;
}

/* 隐藏横向滚动条 */
.el-aside::-webkit-scrollbar {

    display: none;

}

.el-table .el-avatar {
    background-color: white;
}


/*隐藏el-table 的滚动条*/
.el-table__body-wrapper::-webkit-scrollbar {
    /*width: 0;宽度为0隐藏*/
    width: 2px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 2px;
    height: 50px;
    background: #eee;
}

</style>